import React from 'react';
import { Folder, FileText, Film, ListTodo, Bot, Monitor } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import CTAForm from './CTAForm';

const items = [
  {
    name: "视频项目",
    description: "系列主题管理，让你的视频内容更加连贯和有序！",
    icon: Folder,
    color: "from-rose-500 to-rose-600"
  },
  {
    name: "视频文案",
    description: "文案是视频的核心，强大的文案编辑器支持 AI 辅助创作",
    icon: FileText,
    color: "from-rose-600 to-rose-700"
  },
  {
    name: "分镜脚本",
    description: "专业级的分镜脚本管理，让你的视频制作更有条理！",
    icon: Film,
    color: "from-rose-700 to-rose-600"
  },
  {
    name: "进度管理",
    description: "可视化拍摄进度管理，实时追踪每个项目的完成状态",
    icon: ListTodo,
    color: "from-rose-400 to-rose-500"
  },
  {
    name: "AI 创作",
    description: "创新的AI辅助工具，助力你打造独特的视频内容！",
    icon: Bot,
    color: "from-rose-600 to-rose-700"
  },
  {
    name: "提词器",
    description: "精心设计的提词器，多端适配，镜像题词可搭配相机录制，提升效率",
    icon: Monitor,
    color: "from-rose-700 to-rose-700"
  },
  {
    name: "封面制作",
    description: "丰富的封面模板和设计工具，快速制作吸引眼球的视频封面",
    icon: Film,
    color: "from-rose-500 to-rose-700"
  },
  {
    name: "音乐库",
    description: "海量正版音乐素材，按场景分类，轻松找到适合视频的背景音乐",
    icon: Folder,
    color: "from-rose-700 to-rose-700"
  },
];

export default function Features() {
  return (
    <section className="bg-gradient-to-b from-white to-slate-50 dark:from-slate-900 dark:to-slate-800 py-24">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-20">
          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
            为您的视频创作
            <span className="bg-gradient-to-r from-rose-600 to-rose-700 bg-clip-text text-transparent">
              提供更多可能
            </span>
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
            从创意构思到成品发布，全流程工具助力您的视频创作之旅
          </p>
        </div>

        {/* Features Grid */}
        <div className="grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {items.map((item, itemIdx) => {
            const Icon = item.icon;
            return (
              <Card 
                key={itemIdx} 
                className="group relative bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2"
              >
                <CardContent className="p-6 space-y-4">
                  {/* Icon */}
                  <div className={`inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-r ${item.color} shadow-lg group-hover:scale-110 transition-transform duration-300`}>
                    <Icon className="w-7 h-7 text-white" />
                  </div>
                  
                  {/* Content */}
                  <div className="space-y-3">
                    <h3 className="text-xl font-bold text-gray-900 dark:text-white group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors">
                      {item.name}
                    </h3>
                    <p className="text-gray-600 dark:text-gray-300 leading-relaxed group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors">
                      {item.description}
                    </p>
                  </div>
                  
                </CardContent>
              </Card>
            )
          })}
        </div>
        
        {/* Bottom CTA */}
        <div className="text-center mt-20">
          <div className="inline-flex items-center justify-center w-full">
            <CTAForm />
          </div>
        </div>
      </div>
    </section>
  );
}